<template>
  <div style="width: 100%; height: 300px; margin-top: 20px">
    <div
      id="typePercent"
      style="float: left; width: 49%; height: 100%; background: white; border-radius: 5px"
    ></div>
    <div
      id="top5"
      style="float: right; width: 49%; height: 100%; background: white; border-radius: 5px"
    ></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'
import { ElMessage } from 'element-plus'

onMounted(() => {
  getMoviesData()
  getTopN()
})

const movieData = ref([])
const topN = ref([])

function getMoviesData() {
  // 使用axios获得 movieData的值
  axios
    .get('/api/diagram/getMtypeCount')
    .then((res) => {
      movieData.value = res.data
      setStatePercent()
    })
    .catch(() => {
      ElMessage.warning('获取电影类型统计信息失败！')
    })
}

function getTopN() {
  // 使用axios获得topN的数据
  axios
    .get('/api/diagram/getMovie_Top5Rate')
    .then((res) => {
      topN.value = res.data
      setTop5()
    })
    .catch(() => {
      ElMessage.warning('获取电影信息失败！')
    })
}

function setStatePercent() {
  const typeData = [
    { value: 0, name: '剧情' },
    { value: 0, name: '家庭' },
    { value: 0, name: '动作' },
    { value: 0, name: '冒险' },
    { value: 0, name: '科幻' },
    { value: 0, name: '爱情' },
    { value: 0, name: '历史' },
    { value: 0, name: '战争' }
  ]
  for (let i = 0; i < typeData.length; i++) {
    typeData[i].value = movieData.value[i].value
  }

  const myChart = echarts.init(document.getElementById('typePercent'))
  myChart.setOption({
    title: {
      text: '电影类型占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a}<br/>{b}:{c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        // 图例中文字的样式
        fontSize: 16
      }
    },
    color: [
      'rgb(116,216,243)',
      'rgb(1,231,225)',
      'rgb(55,182,255)',
      'rgb(42,178,116)',
      'rgb(229,88,234)',
      '#FE8463',
      '#FAD860',
      '#F3A43B'
    ],
    series: [
      {
        name: '观看量',
        type: 'pie', // 设置图表类型为饼图
        radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        center: ['65%', '50%'],
        itemStyle: {
          normal: {
            label: {
              normal: {
                formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                show: true,
                position: 'left'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            }
          }
        },
        data: typeData
      }
    ]
  })
}

function setTop5() {
  const movieName = []
  const movieRate = []
  for (const item of topN.value) {
    movieName.push(item.name)
    movieRate.push(item.value)
  }
  const myChart = echarts.init(document.getElementById('top5'))
  myChart.setOption({
    title: {
      text: '电影评分最高五部电影',
      left: '6%'
    },
    tooltip: {},
    legend: {
      data: ['评分·'],
      left: '70%'
    },
    xAxis: {
      data: movieName,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {},
    series: [
      {
        name: '评分',
        type: 'bar',
        // barWidth: 25,
        itemStyle: {
          normal: {
            color: function (params) {
              var colorList = [
                'rgb(116,216,243)',
                'rgb(1,231,225)',
                'rgb(55,182,255)',
                'rgb(42,178,116)',
                'rgb(229,88,234)',
                '#FE8463',
                'rgb(1,231,225)',
                '#FAD860',
                '#F3A43B',
                '#60C0DD'
              ]
              return colorList[params.dataIndex]
            },
            // 以下为是否显示，显示位置和显示格式的设置了
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        },
        data: movieRate
      }
    ]
  })
}
</script>
